<template>
    <div class="detail-qrcode">
        <div class="body">
            <div class="left">
                <div class="code">
                    <div class="img">
                        <img :src="mpSrc" alt=""/>
                    </div>

                    <div class="title">
                        微信扫码，小程序打开上传资料
                    </div>
                </div>
            </div>

            <div class="right">
                <div class="code">
                    <div class="img">
                        <img :src="h5Src" alt=""/>
                    </div>

                    <div class="title">
                        微信扫码直接上传资料
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import QRCode from 'qrcode';
import CONFIG_PROJECT from '@config/project';

export default {
    props: {
        search: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            mpSrc: '',
            h5Src: '',
        };
    },
    watch: {
        search: {
            handler(val) {
                if (!val) {
                    return;
                }

                this.initQrCode();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        initQrCode() {
            var search = this.search,
                searchStr = '';

            Object.keys(search).forEach(key => {
                let val = search[key];

                if (typeof val === 'object') {
                    val = JSON.stringify(val);

                    val = encodeURIComponent(val);
                }

                searchStr += `&${key}=${val}`;
            });

            searchStr = searchStr.slice(1);

            var mpUrl = `${CONFIG_PROJECT.origins.wxmpQrcode}/upload-from-qrcode?${searchStr}`,
                h5Url = `${CONFIG_PROJECT.origins.wap}/pages-sub-function/upload-from-qrcode/upload-from-qrcode?${searchStr}`;

            QRCode.toDataURL(mpUrl, (err, src) => {
                if (!src) {
                    return;
                }
                
                this.mpSrc = src;
            });

            QRCode.toDataURL(h5Url, (err, src) => {
                if (!src) {
                    return;
                }
                
                this.h5Src = src;
            });
        }
    },
    mounted() {
        
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';
    .detail-qrcode{
        display: flex;
        align-items: center;
        min-width: 400px;
        width: 100%;

        .body{
            display: flex;
            flex: 1;
            
            .left, .right{
                display: flex;
                justify-content: center;
                flex: 1;
            }

            .code{
                display: flex;
                flex-direction: column;
                justify-content: center;

                img{
                    display: block;
                    width: 180px;
                    height: 180px;
                    margin: 0 auto;
                    border-radius: 4px;
                }

                .title{
                    text-align: center;
                    margin-top: 1em;
                }
            }

            .left{
                img{
                    // border: 3px solid $primaryColor;
                }
            }

            .right{
                img{
                    // border: 3px solid #07C160;
                }
            }
        }
    }
</style>